<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>The Rotating food</title>
		  </head>
	<style>
		p {
			font-family: fantasy;
		}
		.box {
			background: #eef3f7;
		}
		.box:hover {
			background: #eef3f7;
			color: #eef3f7; 
		}
		.hun {
			background: #eef3f7;
		}
		.hun:hover {
			background: #eef3f7;
			color: #eef3f7; 
		}
		#div1 {
			height: 150px;
			width: 150px;
			background: #eef3f7;	
			position:relative;
			animation-name: hot 5s linear 0s infinite alternate;
			/* Firefox: */
	        -moz-animation:hot 5s linear 0s infinite alternate;
	        /* Safari and Chrome: */
	        -webkit-animation:hot 5s linear 0s infinite alternate;
	        /* Opera: */
	        -o-animation:hot 5s linear 0s infinite alternate;
	        
		}
		#div2 {
			height: 150px;
			width: 150px;
			background: #eef3f7;	
			position:relative;
			animation-name: ham 5s linear 0s infinite alternate;
			/* Firefox: */
	        -moz-animation:ham 5s linear 0s infinite alternate;
	        /* Safari and Chrome: */
	        -webkit-animation:ham 5s linear 0s infinite alternate;
	        /* Opera: */
	        -o-animation:ham 5s linear 0s infinite alternate;
		}
		#div3 {
	        position: relative;
	        height: 600px;
	        width: 450px;
	        margin: 100px;
	        padding:10px;
            border:1px solid #a5b6c8;background:#eef3f7;
	        }
	    #div4 {
	    	position: relative;
	        height: 60px;
	        width: 400px;
	        margin: 100px;
	        padding:10px;
	    }
			
		@keyframes hot{
            0%   {left:0px; top:0px;}
            25%  {left:300px; top:0px;}
            50%  {left:300px; top:300px;}
            75%  {left:0px; top:300px;}
            100% {left:0px; top:0px;}
            }
		@-moz-keyframes hot /* Firefox */{
            0%   {left:0px; top:0px;}
            25%  {left:300px; top:0px;}
            50%  {left:300px; top:300px;}
            75%  {left:0px; top:300px;}
            100% {left:0px; top:0px;}
            }


        @-webkit-keyframes hot /* Safari and Chrome */{
            0%   {left:0px; top:0px;}
            25%  {left:300px; top:0px;}
            50%  {left:300px; top:300px;}
            75%  {left:0px; top:300px;}
            100% {left:0px; top:0px;}
            }

        @-o-keyframes hot /* Opera */{
            0%   {left:0px; top:0px;}
            25%  {left:300px; top:0px;}
            50%  {left:300px; top:300px;}
            75%  {left:0px; top:300px;}
            100% {left:0px; top:0px;}
            }
        @keyframes ham{
            0%   {left:300px; top:300px;}
            25%  {left:0px; top:300px;}
            50%  {left:0px; top:0px;}
            75%  {left:300px; top:0px;}
            100% {left:300px; top:300px;}
            }
		@-moz-keyframes ham /* Firefox */{
            0%   {left:300px; top:300px;}
            25%  {left:0px; top:300px;}
            50%  {left:0px; top:0px;}
            75%  {left:300px; top:0px;}
            100% {left:300px; top:300px;}
            }


        @-webkit-keyframes ham /* Safari and Chrome */{
            0%   {left:300px; top:300px;}
            25%  {left:0px; top:300px;}
            50%  {left:0px; top:0px;}
            75%  {left:300px; top:0px;}
            100% {left:300px; top:300px;}
            }

        @-o-keyframes ham /* Opera */{
            0%   {left:300px; top:300px;}
            25%  {left:0px; top:300px;}
            50%  {left:0px; top:0px;}
            75%  {left:300px; top:0px;}
            100% {left:300px; top:300px;}
            }
           
     </style>

	<body>
		<div id="div4">
    	<p><font size="10" ><b>The Rotating food</b></font></p>
    	<p1><font size="5" >Put the mouse over me and you can eat me
</font>
</p1>
    </div>
	<div id="div3">	
		<div id="div1" >
            <svg class="box" width="150px" height="150px" color="red" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hotdog" class="svg-inline--fa fa-hotdog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M488.56 23.44a80 80 0 0 0-113.12 0l-352 352a80 80 0 1 0 113.12 113.12l352-352a80 80 0 0 0 0-113.12zm-49.93 95.19c-19.6 19.59-37.52 22.67-51.93 25.14C373.76 146 364.4 147.6 352 160s-14 21.76-16.23 34.71c-2.48 14.4-5.55 32.33-25.15 51.92s-37.52 22.67-51.92 25.15C245.75 274 236.4 275.6 224 288s-14 21.75-16.23 34.7c-2.47 14.4-5.54 32.33-25.14 51.92s-37.53 22.68-51.93 25.15C117.76 402 108.4 403.6 96 416a16 16 0 0 1-22.63-22.63c19.6-19.59 37.52-22.67 51.92-25.14 13-2.22 22.3-3.82 34.71-16.23s14-21.75 16.22-34.7c2.48-14.4 5.55-32.33 25.15-51.92s37.52-22.67 51.92-25.14c13-2.22 22.3-3.83 34.7-16.23s14-21.76 16.24-34.71c2.47-14.4 5.54-32.33 25.14-51.92s37.52-22.68 51.92-25.15C394.24 110 403.59 108.41 416 96a16 16 0 0 1 22.63 22.63zM31.44 322.18L322.18 31.44l-11.54-11.55c-25-25-63.85-26.66-86.79-3.72L16.17 223.85c-22.94 22.94-21.27 61.79 3.72 86.78zm449.12-132.36L189.82 480.56l11.54 11.55c25 25 63.85 26.66 86.79 3.72l207.68-207.68c22.94-22.94 21.27-61.79-3.72-86.79z"></path></svg>
		    	 
		    </svg>
		</div >
		<div id="div2">
            <svg class="hun" width="150px" height="150px" color="yellow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hamburger" class="svg-inline--fa fa-hamburger fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 256H48a48 48 0 0 0 0 96h416a48 48 0 0 0 0-96zm16 128H32a16 16 0 0 0-16 16v16a64 64 0 0 0 64 64h352a64 64 0 0 0 64-64v-16a16 16 0 0 0-16-16zM58.64 224h394.72c34.57 0 54.62-43.9 34.82-75.88C448 83.2 359.55 32.1 256 32c-103.54.1-192 51.2-232.18 116.11C4 180.09 24.07 224 58.64 224zM384 112a16 16 0 1 1-16 16 16 16 0 0 1 16-16zM256 80a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm-128 32a16 16 0 1 1-16 16 16 16 0 0 1 16-16z"></path></svg>
        </div>
        </div>
    
	</body>
</html>
